<template>
    <div>
        <div class="box">
            <!-- 筛选查询 -->
            <div class="list">
                <div>
                    <img class="list-img" src="../../../assets/images/搜索小.png" alt="">
                </div>
                <div>
                    筛选查询
                </div>
            </div>
            <div class="search">
                <div class="search">


                    <div class="whead">
                        <div class="left">用户ID  :</div>
                        <el-input v-model="input" @change="btnchange(input)" style="width: 240px;" placeholder="用户ID">
                        </el-input>
                    </div>
                    <div class="whead">
                        <div class="left">用户手机号  :</div>
                        <el-input v-model="phone" @change="phoneChange(phone)" style="width: 240px;"
                            placeholder="用户手机号">
                        </el-input>
                    </div>
                    <div class="whead">
                        <div class="left">注册时间  :</div>
                        <el-date-picker v-model="timeInfo" @change="timeChange(timeInfo)" style="width: 240px;"
                            prefix-icon="el-icon-time" type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" value-format="yyyy-MM-dd">
                        </el-date-picker>

                    </div>
                </div>

                <div style="display: flex; height: 40px; margin-left: 100px;">
                    <el-button type="primary" @click="btnSearch">搜索</el-button>



                </div>

            </div>
            <!-- 数据列表 -->
            <div class="list">
                <div>
                    <img class="list-img" src="../../../assets/images/查询数据列表.png" alt="">
                </div>
                <div>
                    数据列表
                </div>
            </div>
            <div>
                <!-- 表格 -->
                <el-table border :data="listData" style="width: 100%" align="center">
                    <el-table-column prop="userId" label="用户ID" align="center"></el-table-column>
                    <el-table-column prop="realName" label="用户昵称" align="center"></el-table-column>
                    <!-- <el-table-column label="图片" align="center">
                          <template slot-scope="scope">
                            <img :src="tableData.customAvatarUrl" style="height: 50px"/>
                          </template>
                        </el-table-column> -->
                    <el-table-column prop="phoneNumber" label="手机号" align="center"></el-table-column>
                    <el-table-column prop="agentLevel" label="代理等级" align="center"></el-table-column>
                    <el-table-column prop="agentSuperiorId" label="代理上级" align="center"></el-table-column>
                    <el-table-column prop="customerCount" label="客户数" align="center"></el-table-column>
                    <el-table-column prop="agentEffectiveDate" label="代理生效期限" align="center"></el-table-column>
                    <el-table-column prop="agentExpiryDate" label="代理到期期限" align="center"></el-table-column>
                    <el-table-column fixed="right" label="操作"  align="center">
            <template slot-scope="scope" >
              <el-button @click="examineClick(scope.row.userId)" type="primary" size="small">查看</el-button>
              
                <el-button
                  @click="handleClick(scope.row.userId)"
                  type="primary"
                  size="small"
                  >编辑</el-button
                >
            </template>
          </el-table-column>
                </el-table>
                <!-- 分页器 -->
                <div class="block" style="margin-top:15px;">
                    <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" background
                        layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>

</template>
 
<script>

// import CommonTable from "@/components/Table/index.vue";
import { queryFishPartyAgentPage } from '@/api/user'
export default {
    data() {
        return {
            input: '', //搜索
            phone: '', //手机号搜索
            timeInfo: '', //日期选择
            loading: false,
            selectedAssetsList: [], // 该数组对象
            assetsUidList: [], // 下标值
            currentPage: 1, //当前页数
            pageSize: 10, //每页条数
            total: 0, //总条目数
            listData: [],
            beginDate: '', //代理期限:开始时间
            endDate: '', //代理期限:结束时间
            agentId: 0, //代理商ID
            customerType: 0, //客户类型：0.全部客户 1.待成交客户 2.已成交客户
            registerBeginDate: '', //注册日期开始
            registerEndDate: '', //注册日期结束
            userId: '', //用户ID
        }
    },
    created() {
        this.queryFishPartyAgentPage(this.pageSize, this.currentPage)
    },
    methods: {
          // 编辑页面
    handleClick(e) {
      let userId = e;
      this.$router.push({ path: "/userEdit", query: { userId } });
    },
  // 查看用户
  examineClick(e) {
      this.$router.push({ path: "/agencyEdit", query: { e } });
    },
        async queryFishPartyAgentPage(limit, page) {
            let data = {
                limit: this.pageSize,
                page: this.currentPage,
                beginDate: this.beginDate,
                agentId: this.agentId,
                endDate: this.endDate,
                customerType: this.customerType,
                userId: this.userId
            }
            let result = await queryFishPartyAgentPage(data)
            if (result.code == 0) {
                this.listData = result.data.records
                this.pageSize = result.data.limit
                this.total = result.data.total
            }
            this.listData.forEach(element => {
                if (element.agentLevel == 2) {
                    element.agentLevel = '省级代理'


                } else {
                    element.agentLevel = '市级代理'
                }

            });
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
            this.queryFishPartyAgentPage(this.pageSize, this.currentPage)
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.currentPage = val;
            this.queryFishPartyAgentPage(this.pageSize, this.currentPage)
        },
        //  搜索用户ID
        btnchange(e) {
            this.userId = e
            this.queryFishPartyAgentPage(this.pageSize, this.currentPage)
        },
        //手机号输入框数据
        phoneChange(e) {
            this.phoneNumber = e
            this.queryFishPartyAgentPage(this.pageSize, this.currentPage)

        },
        // 时间选择
        timeChange(e) {
            if (e) {
                this.beginDate = e[0]
                this.endDate = e[1]
            } else {
                this.beginDate = ''
                this.endDate = ''
            }

            this.queryFishPartyAgentPage(this.pageSize, this.currentPage)
        },
        btnSearch(e) {
            this.queryFishPartyAgentPage(this.pageSize, this.currentPage)
        }
    }

};
</script>

<style lang="scss" scoped>
.left{
    margin-right: 10px;
}
.box {
    border: 1px solid #ccc;
    width: 98%;
    margin: 10px auto;
}

.list {
    display: flex;
    align-items: center;
    padding-left: 20px;
    height: 50px;
    background-color: #f3f3f3;
    color: #666;

    .list-img {
        width: 20px;
        height: 20px;
    }
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #1abc9c !important;
    color: #FFF;
}

.search {
    display: flex;
    align-items: center;
    height: 80px;
    line-height: 80px;
    margin: 0 20px;

}

.whead {
    width: 400px;
    display: -webkit-box;
}

::v-deep .el-input__inner {

    // width: 240px;
}
</style>